<template>
  <div>

    <div class="content-list follow-record">
      <el-scrollbar>
        <div v-for="(item,index) in tableData" :key="index" class="content-item">
          <div style="display: flex;flex-direction: row;align-items: center">
            <!--<img style="width: 50px;height: 50px;border-radius: 50%" :src="item.follower_photo_url" />-->
            <div style="margin-left: 20px">
              <span style="font-size: 16px;color: #3f3f3f;font-weight: bold"><span style="color: grey">跟进人：</span>{{item.staff_info?item.staff_info.realname:''}}</span>
              <span style="color: grey">({{item.staff_info?item.staff_info.phone:''}})</span>
              <span style="margin-left: 15px;color: grey">{{item.created_at}}</span>
            <!--  <span style="color: #F56C6C;margin-left: 10px;cursor: pointer" @click="delData(item.id)">
              <el-icon class="el-icon-delete-solid"/>
              </span> -->
            </div>
          </div>
          <div style="margin-left: 20px;margin-top: 10px">
            <div style="color: #3f3f3f;width: 60%;" ><span style="font-weight: bold;color: grey">跟进内容：</span>{{item.job_content}}</div>
            <div style="margin-left: 40px;">
              <div v-if="item.Img_list" style="margin-top: 10px">
                 <!-- 预览图片 -->
                  <el-image  v-for="(img,index) in item.Img_list" :key="index"
                     style="width: 100px; height: 100px;margin-right: 10px;"
                     :src="img" fit="cover"
                     :preview-src-list="item.Img_list">
                  </el-image>
              </div>
              <div v-if="item.video_url" style="margin-top: 10px">
                <video :src="item.video_url" controls="controls" muted="muted" preload="preload" width="30%" height="200px">
                </video>

              </div>
             </div>
          </div>

        </div>
      </el-scrollbar>

    </div>
  </div>
</template>

<script>
  export default {
    props: {
      id: '',
      tableData: {
        type: Array,
        default: []
      },
      page: '',
      total: '',
      addDialogFlag: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return{
        limit: 8,
        addForm: {
          desc: "",
          unit_id: "",
          img_ids: "",
          id: ""
        },
        imgDialogUrl: '',
      }
    },
    methods: {

    }
  }
</script>

<style scoped>
  .content-list{
    /* max-height: 600px; */
    height:calc(100vh - 355px);
    overflow-y: auto;
  }

  .content-item{
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom: 1px solid #EDEDED;
  }
</style>
